<template>       
<el-container class="home-container">
    <!-- 头部区域 -->
     <el-header>
      <div>
          <span> 熬夜写博客ing</span>
      </div>
      <el-button type="text" @click="logout">退出</el-button>
       <el-button  type="text" @click="login">登录</el-button>
      </el-header>
  <!-- 页面主体区域 -->
  <el-container>
      <!-- 侧边栏 -->
   <el-aside width="200px">
       <!-- 侧边栏菜单区 -->
        <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- 一级菜单 -->
      <el-submenu index="1">
          <!-- 一级菜单的模板区 -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <!-- 二级菜单 -->
          <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-menu>
   </el-aside>
   <!-- 页面主体 -->
  <el-main>Main</el-main>
  </el-container>
  <!-- 页面尾部 -->
  <el-footer>Footer</el-footer>
</el-container>

</template>

<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        login(){
            this.$router.push("login")
        }
    }
}
</script>
<style scoped>
.el-header{
background-color:wheat ;
display: flex;
justify-content: space-between;
align-items: center;
color: red;
font-size: 20px;
font-style: italic;
box-shadow: 10px 10px 5px #888888;
}
.el-header div{
 display: flex;
 align-items: center;
}
.el-header div span{
    margin-left: 15px;
}
.el-main{
    background-color: #eaedf1;
}
.el-footer{
    background-color: #373d41;
}
.home-container{
    height: 100%;
}
.el-aside{
     background-color:#545c64;
}
</style>